<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0077)http://221.226.58.230:8024/WebSite/Branch/RealInformation/Data/DataChart.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="<%=request.getContextPath()%>/css/SonPage.css"
	rel="stylesheet" type="text/css">
<link href="<%=request.getContextPath()%>/css/Element.css"
	rel="stylesheet" type="text/css">
<script src="<%=request.getContextPath()%>/js/echarts.common.min.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/Mtopt_1.1.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/SonPage.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/shouye.js"
	type="text/javascript"></script>
<link href="<%=request.getContextPath()%>/css/easyui.css"
	rel="stylesheet" type="text/css">
<link href="<%=request.getContextPath()%>/css/icon.css" rel="stylesheet"
	type="text/css">
<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/jquery.easyui.min.js"
	type="text/javascript" charset="utf-8"></script>
<script src="<%=request.getContextPath()%>/js/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/highcharts.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/grid.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/exporting.js"
	type="text/javascript"></script>
<link href="<%=request.getContextPath()%>/css/DayReport.html.css"
	rel="stylesheet">
<script>          
        function selectDefault(){
        	var df=$("#Sel_Area").val();  
        	$.ajax({
        		url:"<%=basePath%>qiyeServlet",
        		type:"post",
        		data:{"default":df},
        		success:function(data){
        			$("#SeltPolluteSource").html(data);
        		},
        		error:function(){
        			alert("error");
        		}
        	});
        }
        function selectOutlet(){
        	var outlet=$("#SeltPolluteSource").val();
        	$.ajax({
        		url:"<%=basePath%>chatouServlet",
			type : "post",
			data : {
				"outlet" : outlet
			},
			success : function(data) {
				$("#SeltDischargePort").html(data);
			},
			error : function() {
				alert("error");
			}
		});
	}
</script>

</head>
<body>
	<div class="DivSearchSource"
		style="width: 1180px; height: 28px; background-color: #E1E1E1;">
		<table cellpadding="0" cellspacing="0"
			style="display: none; width: 100%; height: 100%;">
			<tbody>
				<tr>
				
				</tr>
			</tbody>
		</table>
		<form method="post"
			action="<%=request.getContextPath()%>/chartServlet">
			<table cellpadding="0" cellspacing="0"
				style="width: 100%; height: 100%;">
				<tbody>
					<tr>
						<td><label class="LabelMain" style="padding-left: 5px;">区域:</label>
							<select class="SelectDefault" id="Sel_Area" name="Sel_Area"
							style="width: 115px" onchange="selectDefault()">
								<option value="小店区">小店区</option>
								<option value="迎泽区">迎泽区</option>
								<option value="杏花岭区">杏花岭区</option>
								<option value="尖草坪区">尖草坪区</option>
								<option value="万柏林区">万柏林区</option>
								<option value="晋源区">晋源区</option>
						</select> <label class="LabelMain" style="padding-left: 5px;">企业:</label> <select
							class="SelectDefault" id="SeltPolluteSource"
							name="SeltPolluteSource" style="width: 220px"
							onchange="selectOutlet()">
								<option value="0">请选择企业</option>

						</select> <label class="LabelMain" style="padding-left: 5px;">排放口:</label>
							<select class="SelectDefault" id="SeltDischargePort"
							name="SeltDischargePort" style="width: 115px">

								<option value="0">请选择排放口</option>
						</select> <label class="LabelMain" style="padding-left: 5px;">因子:</label> <select
							class="SelectDefault" id="Sel_Item" name="diviosr"
							style="width: 100px">

								<option value="油烟浓度">油烟浓度</option>
								<option value="联动比">联动比</option>
								<option value="温度">温度</option>
								<option value="湿度">湿度</option>
								<option value="压力">压力</option>
						</select> 
						<label class="LabelMain" style="padding-left: 5px;">时间:</label> 
						<input id="TxtSearchDataTime" name="TxtSearchDataTime" type="text" class="easyui-datebox datebox-f combo-f" style="width: 90px; display: none;" value="2017-05-10">
							&nbsp; <input id="BtnRefresh" class="ButtonMain" type="submit"
							value="生成图表"> <input id="BtnVisitDetail" type="button"
							class="ButtonMain" value="详细数据"> <input id="BtnBackPage"
							type="button" class="ButtonDefault" value="返回上层"></td>
					</tr>
				</tbody>
			</table>
		</form>

	</div>
	<div class="panel" style="display: block; width: 1180px;">
		<div class="panel-header" style="width: 1168px;">
			<div class="panel-title">污染物图表</div>
			<div class="panel-tool"></div>
		</div>
		<div style="padding:0 35px">
			<div id="div_Msg" class="easyui-panel panel-body" title=""
				style="width: 1106px; height: 501px; margin-top:5px ";>
			</div>
			</div>
	</div>


	<script>
		var array = new Array();
		var array_name = new Array();
		var array_date=new Array();
		
		var myCharts = echarts.init(document.getElementById('div_Msg'));

		<c:forEach items="${list}" var="item" varStatus="status" >
			array.push("${item.oil_con}");
			array_name.push("${item.d_name}");
			array_date.push("${item.d_date}");
		</c:forEach>

		var colors = [ '#5793f3', '#d14a61', '#675bba' ];
		option = {
			color : colors,

			tooltip : {
				trigger : 'none',
				axisPointer : {
					type : 'cross'
				}
			},
			legend : {
				data : [ array_date[0] + array_name[0] ]
			},
			grid : {
				top : 50,
				bottom : 50
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : true
				},
				axisLine : {
					onZero : false,
					lineStyle : {
						color : colors[2]
					}
				},
				axisPointer : {
					label : {
						formatter : function(params) {
							return array_name[0]
									+ params.value
									+ (params.seriesData.length ? '-'
											+ params.seriesData[0].data : '');
						}
					}
				},
				data : [ '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
						'06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
						'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
						'18:00', '19:00', '20:00', '21:00', '22:00', '23:00' ]
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : array_date[0] + array_name[0],
				type : 'line',
				smooth : true,
				data : [ array[0], array[1], array[2], array[3], array[4],
						array[5], array[6], array[7], array[8], array[9],
						array[10], array[11], array[12], array[13], array[14],
						array[15], array[16], array[17], array[18], array[19],
						array[20], array[21], array[22], array[23] ]
			} ]
		};
		myCharts.setOption(option);
	</script>


	<div id="DivChart" class="jGrowl bottom-left">
		<div class="jGrowl-notification"></div>
		</div>
</body>

</html>